<template>
    <el-row>
        <el-col :span="14" :offset="5">
            <el-card style="height: 550px;">
                <span>用户名:</span>
                <el-input v-model="data.ID" />
                <span>旧密码:</span>
                <el-input v-model="data.PASSWORD" show-password />
                <span>新密码:</span>
                <el-input v-model="data.NEWPASSWORD" show-password />
                <span>重复新密码:</span>
                <el-input v-model="tmp.repeat" show-password />
                <span>&nbsp;</span>
                <br />
                <el-button type="danger" @click="setPassword">提交</el-button>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive, getCurrentInstance } from "vue";
const axios = getCurrentInstance().appContext.app.axios
const ElMessage = getCurrentInstance().appContext.config.globalProperties.$message
let data = reactive({
    Type: 'changekey',
    ID: '',
    PASSWORD: '',
    NEWPASSWORD: ''
})
let tmp = reactive({
    repeat: ''
})
function setPassword() {
    //简单校验
    if (data.ID === '' || data.PASSWORD === '' || data.NEWPASSWORD === '') {
        ElMessage.error({ message: '用户名或密码不能为空', showClose: true, })
        return
    }
    if (data.NEWPASSWORD != tmp.repeat) {
        ElMessage.error('两次密码不相同')
        return
    }
    //ajax提交密码修改
    axios.post('/api/changekey/', data)
        .then(
            (response) => {
                if (response.data === 'OK') {
                    ElMessage({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    })
                }
                else {
                    ElMessage({
                        showClose: true,
                        message: '用户名或密码错误',
                        type: 'error'
                    })
                }

            }
        )
        .catch((error) => {

            ElMessage.error({ message: '网络错误', showClose: true, })
            console.log(error)

        })
}
</script>

<style scoped>
span {
    display: inline-block;
    margin-bottom: 20px;
    margin-top: 20px;
}
</style>
